<template>
    <div class="card-table">
        <div class="table-header">
            <div class="header-botton-if">
                <slot name="tableHeader"></slot>
            </div>
            <div class="header-button-ri">
                <div class="flex gap-4 mb-4">
                    <span class="test">商品名称：</span>
                    <el-input v-model="getOrderApiData.goodsName" style="width: 180px"  clearable
                        placeholder="请输入商品名称" />
                </div>

                <div class="flex gap-4 mb-4">
                    <span class="test">手机号：</span>
                    <el-input v-model="getOrderApiData.userPhone" name="phone" clearable pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" style="width: 180px" required />
                    <!-- <el-input-number v-model="getOrderApiData.userPhone"  style="width: 180px"  clearable placeholder="请输入手机号" /> -->
                </div>

                <div class="flex gap-4 mb-4">
                    <span class="test">商品状态：</span>
                    <el-select v-model="getOrderApiData.status" placeholder="请选商品状态" clearable>
                        <el-option v-for="item in statuses" :key="item.key" :label="item.label" :value="item.key"
                            />
                    </el-select>
                </div>

                <div class="flex gap-4 mb-4">
                    <el-button type="primary" @click="searchOrderData">查看</el-button>
                </div>


            </div>
        </div>

        <!-- 表格主体 -->
        <el-table border :data="tableData" ref="tableRef" v-bind="$attrs" class="hei" table-layout="auto">

            <el-table-column prop="deliveryMethod" width="100" label="订单类型" align="center" show-overflow-tooltip>

            </el-table-column>
            <el-table-column prop="orderNumber" label="订单号" width="200" align="center" show-overflow-tooltip />
            <el-table-column prop="status" width="100" label="订单状态" align="center" show-overflow-tooltip>
                <template #default="scope">
                    <div>
                        {{ scope.row.status == 1 ? "待支付" :
                            scope.row.status == 2 ? "待配送" :
                                scope.row.status == 3 ? "待自提" :
                                    scope.row.status == 4 ? "配送中" :
                                        scope.row.status == 5 ? "已完成" :
                                            scope.row.status == 6 ? "已取消" :
                                                scope.row.status == 7 ? "待接单" : ""
                        }}
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="name" width="150" label="用户名" align="center" show-overflow-tooltip>
                <template #default="scope">
                    <div>
                        {{ scope.row.address ? scope.row.address.usename : scope.row.user.name }}
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="name" width="200" label="手机号" align="center" show-overflow-tooltip>
                <template #default="scope">
                    <div>
                        {{ scope.row.address ? scope.row.address.phone : scope.row.user.phone }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="pickupCode" width="200" label="提货码" align="center" show-overflow-tooltip />

            <el-table-column prop="age" width="200" label="地址" align="center" show-overflow-tooltip>
                <template #default="scope">
                    <div>
                        {{ scope.row.address ? scope.row.address.detail : "/" }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="orderTime" width="200" label="下单时间" align="center" show-overflow-tooltip />
            <el-table-column prop="totalPrice" width="200" label="实收金额" align="center" show-overflow-tooltip />




            <el-table-column fixed="right" label="操作" width="250" align="center">
                <!-- 表格操作 -->
                <template #default="scope">

                    <el-button type="primary"  v-if="scope.row.status==7" link :icon="Van" @click="receiveOrder(scope)">接单</el-button>
                    <el-button type="danger" v-if="scope.row.status==7" link :icon="Delete" @click="rejectOrder(scope)">拒单</el-button>


                    <el-button type="success" link :icon="View" @click="seekOrderInfo(scope)">查看</el-button>
                </template>



            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="pagin">
            <div class="pagin-left">
            </div>
            <Pagination :pageTotalSize="pageTotalSize"></Pagination>
        </div>


    </div>
</template>
  
<script setup>
import SearchForm from "@/components/SearchForm/index.vue";
import Pagination from "./Pagination/index.vue";
import { Calendar } from '@element-plus/icons-vue'
import {
    Refresh,
    Printer,
    Operation,
    Search,
    CirclePlus,
    Delete,
    EditPen,
    Download,
    Upload,
    View,
    InfoFilled,
    Van

} from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus'
import { computed, ref, toRaw, watchEffect } from "vue";
// import { debounce } from 'lodash';
// import { worksData } from "@/stores/worksData.js";
// import {staffData} from "@/stores/staff.js" 
import { useRouter } from 'vue-router'

import { userManage } from "@/stores/user.js"
// 是否显示搜索模块
let props = defineProps({
    isShowSearch: {
        type: Boolean,
        default: true
    },
    staffInfoData: {
        type: Array,
        default: []
    }
})

const statuses = ref([
    { key: 0, label: '全部订单', count: 0 },
    { key: 7, label: '待接单', count: 0 }, // 示例数据
    { key: 2, label: '待派送', count: 0 }, // 示例数据
    { key: 3, label: '待自提', count: 0 }, // 示例数据
    { key: 4, label: '派送中', count: 0 }, // 示例数据
    { key: 5, label: '已完成', count: 0 }, // 示例数据
    { key: 6, label: '已取消', count: 0 }, // 示例数据

]);

//商品名称
let shopNameData = ref()

//商品分类
let category1data = ref()
const value1 = ref('')//选择的分类

let getOrderApiData = ref({
    status:null,
    userPhone:"",
    goodsName:""
})

// // 输入事件处理函数
// const onInput = (value) => {
//     debouncedPerformQuery(value);
// };

// // 使用 lodash 的 debounce 方法创建防抖函数
// const debouncedPerformQuery = debounce((query) => {
//     performQuery(query);
// }, 400); // 300ms 延迟

// // 模拟的查询函数
// const performQuery = (query) => {

//     console.log(query, "query")
// }

let pageTotalSize = computed(() => {
    // return mStaff.pageTotalSize
})



//使用路由
let router = useRouter()

let mStaff = userManage()

let emit = defineEmits(["openDoor", "openAddDoor","searchOrderData","receiveOrder"])


// const isShowSearch = ref(true);
// let wData = worksData();

// 获取仓库里面的作品数据
let tableData = computed(() => {
    // console.log(wData.teamsWorksdata)
    let newData = []
    let data = toRaw(props.staffInfoData)

    //  console.log(data,"这是从父亲传过来的")
    data.forEach(item => {
        newData.push({ ...item, ...item.identity })
    })
    // console.log(newData)
    return newData
});


// 查询订单数据
let searchOrderData = ()=>{
    console.log(getOrderApiData.value,"getOrderApiData")
    emit("searchOrderData",getOrderApiData.value)
}


// // 是否选择了数据
// let allSelectData = (e) => {
//   selectData.value = e;
// };

// // 展示详情数据
// let showData = (e) => {
//   console.log(e.row);
//   // getSelectionRows()
// };

// 删除员工
let seekOrderInfo = (e) => {
    console.log("查看订单")
    emit("openAddDoor", e.row)
}


//添加商家商店位置
let rejectOrder = (e) => {

    console.log("拒单")
}

// 修改员工的数据
let receiveOrder = (e) => {
    // console.log(e.row.orderNumber,"接单")
    emit("receiveOrder",e.row.orderNumber)
    // console.log("接单")
    // emit("openAddDoor")
}


// 提交数据
let pushData = () => {
    // console.log(selectData.value);
    // console.log("提交数据")
};

</script>
  
<style lang="scss" scoped>
.card-table {
    box-sizing: border-box;
    background-color: #fff;
    padding: 15px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .table-header {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .header-button-ri {
            display: flex;

            .gap-4 {
                margin-right: 20px;

                .test {
                    margin-right: 10px;
                    font-size: 14px;
                }
            }
        }
    }

    .pagin {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .pagin-left {
            display: flex;
            align-items: center;
            font-size: 14px;

            .mar {
                margin-left: 20px;

                .a {
                    margin: 0 4px;
                }
            }
        }
    }

    .hei {
        width: 100%;
        height: 100%;
    }
}
</style>